<template>
  <!-- 进/出境相关信息 -->
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="152px"
      label-position="right"
      class="flex-form"
      size="mini"
      :disabled="dialogType == 'detail'"
    >
    <el-form-item label="运输批次号" prop="manifestId">
      <el-input
        v-model.trim="form.manifestId"
        @blur="manifestIdBlur"
        placeholder="请输入运输批次号"
        clearable
      />
    </el-form-item>
      <el-form-item label="进出口类型" prop="iEFlag">
        <el-select
          v-model="form.iEFlag"
          placeholder="请选择进类型"
           @change="iEFlagChange"
        >
          <el-option
            v-for="(item, index) in dict.type.sys_i_e_flag"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通关代码" prop="customsStateCode">
        <el-select
          v-model="form.customsStateCode"
          disabled
          placeholder="请选择确报类型"
        >
          <el-option
            v-for="(item, index) in  customsStateCodeOption"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="确报类型" prop="bindingType">
        <el-select
          v-model="form.bindingType"
           disabled
          placeholder="请选择确报类型"
        >
          <el-option
            v-for="(item, index) in  add_mft_binding_type"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="进出境口岸" prop="customsCode">
        <el-select
          v-model="form.customsCode"
          placeholder="请选择进出境口岸"
          @change="customsCodeChange"
          filterable
        >
          <el-option
            v-for="(item, index) in customsList"
            :key="index"
            :label="item.value + '-' + item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监管场所" prop="fieldCode">
        <el-select v-model="form.fieldCode" @change="fieldCodeChange" placeholder="请选择监管场所" >
          <el-option
            v-for="(item, index) in selectBaseFieldInfoList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="国门" prop="gateFieldCode" v-show="gateFiledShow">
        <el-select v-model="form.gateFieldCode" placeholder="请选择国门">
          <el-option
            v-for="(item, index) in selectGateBaseFieldInfoList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
      findBaseFieldInfo,
      getBaseFieldInfo
    } from "@/api/system/baseFieldInfo";
    import {findListCustoms} from "@/api/system/customs";
export default {
  props: {
    dict: {},
    detailData: {
      type: Object,
      default: () => {}
    },
    dialogType: {}
  },

  data() {
    return {
      form: {
        iEFlag: "",
        bindingType: null,
        manifestId: null,
        customsCode: null,
        fieldCode: null,
        customMasterCode: null,
        msgRepName: null,
        agentCode: null,
        customsStateCode: 'RD10',
      },
      add_mft_binding_type:[
        {value:"MT4403",label:"公路进口空载运输工具承运确报"},
        {value:"MT4404",label:"公路出口空载运输工具承运确报"},
      ],
      customsStateCodeOption:[
        {value:"RD10",label:"空车直通"},
      ],
      gateFiledShow:false,
      // 表单校验
      rules: {
        customsCode: [
          {
            type: "string",
            required: true,
            message: "选择抵达第一目的港日期不能为空",
            trigger: "blur",
          },
        ],
        iEFlag: [
          {
            type: "string",
            required: true,
            message: "进出口标志不能为空",
            trigger: "blur",
          },
        ],
        bindingType: [
          {
            type: "string",
            required: true,
            message: "确报类型不能为空",
            trigger: "blur",
          },
        ],
        manifestId: [
          {
            type: "string",
            required: true,
            message: "运输批次号不能为空",
            trigger: "blur",
          },
        ],
        fieldCode: [
          {
            type: "string",
            required: true,
            message: "国门场所不能为空",
            trigger: "blur",
          },
        ],
        gateFieldCode: [
          {
            type: "string",
            required: false,
            message: "国门场所不能为空",
            trigger: "blur",
          },
        ],
        customsStateCode: [
          {
            type: "string",
            required: true,
            message: "海关货物通关代码不能为空",
            trigger: "blur",
          },
        ],
        msgRepName: [
          {
            type: "string",
            required: true,
            message: "舱单传输人名称不能为空",
            trigger: "blur",
          },
        ],
      },
     //关区下列列表
     customsList:[],
     //下来场所列表
     selectBaseFieldInfoList: [],
     //国门场所代码
     selectGateBaseFieldInfoList: [],
    };
  },
  watch: {
    "detailData.id": {
      immediate: true,
      handler(val) {

      },
    },
  },
  created() {
    this.loadCustomsList();
  },
  methods: {

    /* 加载关区信息列表*/
    loadCustomsList() {
      findListCustoms().then(response => {
        this.customsList = response.data;
      });
    },
    //关区代码改变时触发
    customsCodeChange(val){
      this.getLoadBaseFieldInfoList();
    },
    //获取场所下拉列表
    getLoadBaseFieldInfoList() {

      if(this.form.customsCode==null){
        return;
      }

      findBaseFieldInfo({
        customsCode: this.form.customsCode,
        iEFlag:this.form.iEFlag
      }).then(response => {

        let fieldList = response.data;

        this.selectBaseFieldInfoList= fieldList;//.filter(n => "1" == n.extVal1||"3" == n.extVal1);

        if (this.selectBaseFieldInfoList != null && this.selectBaseFieldInfoList.length == 1) {
          this.form.fieldCode = this.selectBaseFieldInfoList[0].value;
        }
        if (this.selectBaseFieldInfoList.length > 0) {
          this.selectGateBaseFieldInfoList = fieldList.filter(n => "2" == n.extVal1);
          if( this.selectGateBaseFieldInfoList.length>0){
           this.rules.gateFieldCode[0].required=true;
          }
        }

      })
    },
    //进出口类型变更
    iEFlagChange(){
      if("I"==this.form.iEFlag){
          this.form.bindingType="MT4403";
      }else if("E"==this.form.iEFlag){
        this.form.bindingType="MT4404";
      }
       this.getLoadBaseFieldInfoList();
    },

    fieldCodeChange(val){
     let selectFielCode=this.selectBaseFieldInfoList.filter(n => val==n.value)[0];
     if(selectFielCode.extVal1=='3'){
       this.gateFiledShow=true;
       this.rules.gateFieldCode[0].required=true;
     }else{
       this.gateFiledShow=false;
       this.rules.gateFieldCode[0].required=false;
       this.form.gateFieldCode=null;
     }
    },

    //批次号离开的时候触发
    manifestIdBlur(){
      let manifestId=this.form.manifestId;

    }

  },
};
</script>

<style lang="scss" scoped>
.flex-form {
  ::v-deep .el-form-item {
    width: 312px;
  }
  ::v-deep .el-form-item__label {
    line-height: 14px;
    display: flex;
    align-items: center;
    height: 32px;
    justify-content: flex-end;
  }
}
</style>
